﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link href="~/css/shop.css" type="text/css" rel="stylesheet" />
    <link href="~/css/Sellerber.css" type="text/css" rel="stylesheet" />
    <link href="~/css/bkg_ui.css" type="text/css" rel="stylesheet" />
    <link href="~/font/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="~/layui-v2.5.4/layui/css/layui.css" media="all" />
    <script src="~/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/js/jquery.cookie.js"></script>
    <script src="~/js/shopFrame.js" type="text/javascript"></script>
    <script src="~/js/Sellerber.js" type="text/javascript"></script>
    <script src="~/js/layer/layer.js" type="text/javascript"></script>
    <script src="~/js/laydate/laydate.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/js/proTree.js"></script>
    <script src="~/js/dist/echarts.js" type="text/javascript"></script>
    <script src="~/layui-v2.5.4/layui/layui.js"></script>
    
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js" type="text/javascript"></script>
    <script src="js/respond.min.js"></script>
    <script src="js/css3-mediaqueries.js"  type="text/javascript"></script>
      <![endif]-->
    <title>品牌管理</title>
</head>

<body>
    <div class="margin" id="page_style">
        <div class="operation clearfix mb15 same_module">
            <ul class="choice_search">
                <li class="clearfix col-xs-2 col-lg-3 col-ms-3 ">
                    <label class="label_name ">品牌名称：</label>
                    <input placeholder="输入品牌名称" id="username" name="" type="text" class="form-control col-xs-8 col-lg-8 col-ms-8" />
                </li>
                @*<li class="clearfix col-xs-2 col-lg-3 col-ms-3">
                        <label class="label_name ">添加时间：</label>
                        <input class="inline laydate-icon form-control Select_Date" id="start">
                    </li>*@
                <li class="clearfix col-xs-2 col-lg-3 col-ms-3 ">
                    @*<select name="" class="margin-right l_f select_style"><option value="1">国内品牌</option><option value="2">国外品牌</option></select>*@
                    <button type="button" id="check" class="btn button_btn bg-deep-blue "><i class="icon-search"></i>查询</button>
                </li>
            </ul>
        </div>
        <div class="h_products_list clearfix mb15" id="Sellerber">
            <!--品牌展示-->
            <div class="Sellerber_left menu" id="menuBar">
                <div class="show_btn" id="rightArrow"><span></span></div>
                <div class="side_title"><a title="隐藏" class="close_btn"><span></span></a></div>
                <div class="menu_style" id="menu_style">
                    <div class="list_content">
                        <div class="side_list">
                            <div id="main" style="height:250px;" class="side_list"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!--品牌列表-->
            <div class="list_Exhibition list_show padding15">
                <div class="operation clearfix mb15  same_module">
                    <span class="l_f">
                        <a href="/Home/Add_Brand" title="添加品牌" class="btn button_btn bg-deep-blue"><i class="fa fa-plus"></i>添加品牌</a>
                        <a href="javascript:ovid()" id="batchdel" class="btn   button_btn btn-danger"><i class="fa fa-trash"></i>批量删除</a>
                        @*<a href="javascript:ovid()" class="btn  button_btn btn-info">国内品牌</a>
                            <a href="javascript:ovid()" class="btn button_btn btn-Dark-success">国外品牌</a>*@
                    </span>
                    <span class="r_f">共：<b>234</b>个品牌</span>
                </div>
                <div class=" datalist_show">
                    <div class="datatable_height confirm">
                        <table class="layui-hide" id="test" lay-filter="demo"></table>
                        <script type="text/html" id="barDemo">
                            <a class="layui-btn layui-btn-xs" id="Back" lay-event="down">下架</a>
                            <a class="layui-btn layui-btn-xs" id="Back" lay-event="edit">编辑</a>
                            <a class="layui-btn layui-btn-xs" id="Back" lay-event="del">删除</a>
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/html" id="imgUrl">
    <img src="{{d.Logo}}" />
</script>
<script src="~/js/Format.js"></script>
<script>

    //列表刷新
    function TableReload() {
        var table = layui.table;
        //获取页面管理员名称和时间
        var username = $("#username").val();
        //上述方法等价于
        table.reload('testReload', {
            where: { //设定异步数据接口的额外参数，任意设
                username: username,
            }
        });
    }

    //查询按钮点击事件
    $("#check").click(function () {
        TableReload(null);
    });



    //layui数据表格
    layui.use('table', function () {
        var table = layui.table
        , form = layui.form;
        table.render({
            elem: '#test'
            , url: '/Brand/QueryPageList'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                { type: 'checkbox' }  //这段是加的
                ,{ field: 'Id', width: 100, title: 'ID', align: 'center' }
                , { field: 'OrderBy', width: 100, title: '排序', align: 'center', sort: true }
                , { field: 'Logo', width:250, title: '品牌LOGO',templet: '#imgUrl', align: 'center', unresize: true }
                , { field: 'Name', title: '品牌名称', width: 150, align: 'center', unresize: true }
                , { field: 'UpdateTime', title: '修改时间', width:300, align: 'center', unresize: true,templet: "<div>{{Format(d.UpdateTime,'yyyy-MM-dd hh:mm:ss')}}</div>"}
                , { field: 'Status', title: '状态', width: 180  }
                , { field: 'Descs', width: 150, title: '描述', align: 'center', templet: '#switchShow', unresize: true }
                , { fixed: 'right', title: '操作', width: 280, align: 'center', toolbar: '#barDemo' }
            ]]
            , page: true
            , id: 'testReload'
        });



         //监听工具条
        table.on('tool(demo)', function (obj) { //obj当前记录
            var data = obj.data;
            var id = data.Id;          
            var tip = "下架";
            if (obj.event == "down") {     //下架功能的代码               
                if (data.Status==0) {
                    tip = "上架";
                    data.Status=1;
                }
                else {
                    data.Status=0;
                }               
                $.ajax({
                    type: "post",                 
                    url: "/Brand/UpdateStatus", 
                    data:data,
                    success: function (result) {
                        if (result.Success) {
                            layer.confirm('确定要' + tip + '该品牌么?', function (index) {
                                layer.msg(tip + '成功！', {
                                    title: '提示框',
                                    icon: 1,
                                    time: 2000
                                }, function () {
                                    location.reload();//刷新页面
                                });
                            });
                        } else {
                            layer.msg(tip + '失败！', {
                                title: '提示框',
                                icon: 1,
                                time: 2000
                            });
                        }
                    },
                });
            }else if (obj.event === 'del') {    //删除功能的代码
                $.ajax({
                    url: "/Brand/Delete",
                    type: "post",
                    data: data,
                    success: function (result) {
                        if (result.Success) {
                            layer.confirm('真的删除么?', function (index) {
                                obj.del();
                                layer.msg('删除成功!', { title: '提示框', icon: 1, time: 2000 });
                                layer.close(index);
                            });
                        }
                        else {
                            layer.msg('删除失败!', { title: '提示框', icon: 0, time: 2000 });
                        }
                    }
                });
            } else if (obj.event === 'edit') {  //编辑功能的代码
              location.href = "/Home/Brand_Edit?id="+id;                            
            }
        });



        //批量删除点击事件
        $("#batchdel").click(function () {
            var checkStatus = table.checkStatus('testReload');
            var data = checkStatus.data;
            if (data.length == 0) {
                layer.msg('至少选中一条数据!', { title: '提示框', icon: 0, time: 2000 });
                return;
            }
            var id = "";
            for (var i = 0; i < data.length; i++) {
                if (i == data.length - 1) {
                    id += data[i].Id;
                }
                else {
                    id += data[i].Id + ",";
                }
            }
            $.ajax({
                url: "/Brand/BatchDeleteById?id=" + id,
                type: "post",
                success: function (result) {
                    if (result.Success) {
                        layer.msg('删除成功!', { title: '提示框', icon: 1, time: 2000 });
                        window.location.reload();
                    }
                    else {
                        layer.msg('删除失败!', { title: '提示框', icon: 0, time: 2000 });
                    }
                }
            });
        });

    });





//设置内页框架布局
$(function() {
	$("#Sellerber").frame({
		float : 'left',
		color_btn:'.skin_select',
		Sellerber_menu:'.list_content',
		page_content:'.list_show',//内容
		datalist:".datatable_height",//数据列表高度取值
		header:65,//顶部高度
		mwidth:350,//宽度自定义
		minStatue:true,

	});
});
function generateOrders(id){
	window.location.href = "Brand_detailed.html?="+id;
};
/*品牌-查看*/
function member_show(title,url,id,w,h){
	layer_show(title,url,w,h);
}
/*品牌-停用*/
/*产品-停用*/
function member_stop(obj,id){
	layer.confirm('确认要下架该品牌吗？该品牌下的所有产品将全部下架。',function(index){
		$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs " onClick="member_start(this,id)" href="javascript:;" title="上架">上架</a>');
		$(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已下架</span>');
		$(obj).remove();
		layer.msg('已下架!',{icon: 5,time:1000});
	});
}
/*产品-启用*/
function member_start(obj,id){
	layer.confirm('确认要上架改该品牌吗？',function(index){
		$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs btn-status" onClick="member_stop(this,id)" href="javascript:;" title="下架">下架</a>');
		$(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已上架</span>');
		$(obj).remove();
		layer.msg('已上架!',{icon: 6,time:1000});
	});
}
/*产品-编辑*/
function member_edit(title,url,id,w,h){
	layer_show(title,url,w,h);
}
/*产品-删除*/
function member_del(obj,id){
	layer.confirm('确认要删除吗？',function(index){
		$(obj).parents("tr").remove();
		layer.msg('已删除!',{icon:1,time:1000});
	});
}
	//设置时间
laydate({
    elem: '#start',
    event: 'focus'
});
</script>
<script type="text/javascript">
    require.config({
        paths: {
            echarts: '../js/dist'
        }
    });
    require(
        [
            'echarts',
            'echarts/chart/pie',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
            'echarts/chart/funnel'
        ],
        function (ec) {
            var myChart = ec.init(document.getElementById('main'));

            option = {
                title: {
                    text: '国内国外品牌比例',
                    subtext: '',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    y: 'bottom',
                    x: 'center',
                    bottom: 30,
                    data: ['国内品牌', '国外品牌']
                },
                toolbox: {
                    show: false,
                    feature: {
                        mark: { show: false },
                        dataView: { show: false, readOnly: false },
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 545
                                }
                            }
                        },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                series: [
                    {
                        name: '品牌数量',
                        type: 'pie',
                        radius: '45%',
                        center: ['50%', '50%'],
                        data: [
                            { value: 335, name: '国内品牌' },
                            { value: 210, name: '国外品牌' },

                        ]
                    }
                ]
            };
            myChart.setOption(option);
        }
    );
</script>
